<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变换属性-原点位置(transform attribute - origin address)</title>
  <!-- 
  transform-origin  是 CSS 中的属性，用于设置元素变换的原点位置。
  transform-origin  属性的总结： 
 
    1.  transform-origin: x-axis y-axis z-axis; ：指定变换的原点位置，其中  x-axis 、 y-axis  和  z-axis  分别表示 X 轴、Y 轴和 Z 轴的位置。 
      - 可以使用关键词（如  top ,  bottom ,  left ,  right ,  center ）或长度值（如像素、百分比）来指定原点位置。 
      - 默认值为  50% 50% 0 ，即元素的中心点。 
    
    2. 通过设置  transform-origin  属性，可以控制元素变换（如旋转、缩放、倾斜）的中心点位置，从而改变元素变换的效果
  -->
  <style>
    .container {
      display: inline-block;
      border: 4px solid skyblue;
    }

    .container > div {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
  <style>
    .transform-origin {
      /* 
        transform-origin - 修改形变的原点位置 
          - transform-origin: center top;
          - transform-origin: 20px 20px;
          - transform-origin: 10% 80%; 百分比相对于父元素宽高
      */
      transform-origin: 10% 80%;
    }

    .transform-origin-hover:hover {
      border: 4px solid red;
      /* 旋转 */
      transform: rotate(-45deg) scale(.6);
    }
  </style>
</head>
<body>

  <h3>1. transform-origin</h3>
  <div class="container">
    <div class="transform-origin">transform-origin</div>
  </div>

  <h3>1. transform-origin-hover</h3>
  <div class="container">
    <div class="transform-origin transform-origin-hover"></div>
  </div>
  
</body>
</html>